<style>
    .jiTaoButton {
        margin-left: 0px;
    }

    #Product_Name,
    #Product_Dos {
        margin-top: 12px;
    }
</style>
<script type="text/html" template>
    <link rel="stylesheet" href="{{ layui.setter.base }}style/css/reset.css">
    <link rel="stylesheet" href="{{ layui.setter.base }}style/css/home/MachineCapacity.css">
    <link rel="stylesheet" href="{{ layui.setter.base }}style/page.css">
</script>

<div class="layui-fluid">
    <div class="layui-row">
        <div class="layui-col-xs12 layui-col-sm12 layui-col-md12">
            <!-- 角色名称和角色描述 -->
            <div class="layui-form">
                <div class="layui-inline" style="line-height: 36px;">
                    <label class="layui-form-label">产品类型编号:</label>
                    <div class="layui-input-inline OneInput">
                        <input type="tel" name="id" lay-verify="" autocomplete="off" class="layui-input classOnes"
                            id="Product_Number">
                    </div>
                </div>
                <div class="layui-inline" style="line-height: 36px;">
                    <label class="OneLabel layui-form-label">产品类型名称:</label>
                    <div class="layui-input-inline TwoInput">
                        <input type="tel" name="name" lay-verify="" autocomplete="off" class="layui-input classTwos"
                            id="Product_Name">
                    </div>
                </div>
                <div class="layui-inline" style="line-height: 36px;">
                    <label class="OneLabel layui-form-label">产品类型描述:</label>
                    <div class="layui-input-inline ThreeInput">
                        <input type="tel" name="dsc" lay-verify="" autocomplete="off" class="layui-input classThree"
                            id="Product_Dos">
                    </div>
                </div>
                <div class="layui-inline">
                    <button class="jiTaoButton layui-btn layui-btn-radius layui-btn-primary" lay-submit
                        lay-filter="query">
                        <i class="layui-icon layui-icon-search" style="font-size:13px;"></i>
                        <span>查询</span>
                    </button>
                </div>

                <div class="cheBoxDiv">
                    <table class="InputInfoTable layui-table" id="ProdicobleType" lay-filter="test">

                    </table>
                </div>

                <!-- 确定和取消按钮 -->
                <div class="buttonGrounpBtn">
                    <button class="layui-btn layui-btn-radius layui-btn-primary" lay-filter="layuiadmin-app-form-submit"
                        lay-submit>确定</button>
                    <button class="layui-btn btn2 layui-btn-radius layui-btn-primary">取消</button>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- js -->
<script type="text/javascript">
    layui.use(['admin', 'form', 'user', 'table', 'api', 'laytpl', 'utill', 'laydate'], function () {
        var table = layui.table,
            setter = layui.setter,
            laytpl = layui.laytpl,
            api = layui.api,
            utill = layui.utill,
            form = layui.form,
            element = layui.element,
            laypage = layui.laypage,
            form = layui.form,
            admin = layui.admin,
            view = layui.view,
            $ = layui.jquery;

        table.render({
            skin: 'nob',
            elem: '#ProdicobleType',
            url: api.host + api.selectProducts_llp,
            dataType: 'json',
            contentType: 'application/json',
            request: {
                pageName: 'pageNum', //页码的参数名称，默认：page
                limitName: 'pageSize' //每页数据量的参数名，默认：limit
            },
            response: {
                statusCode: 200 //重新规定成功的状态码为 200，table 组件默认为 0
            },
            parseData: function (res) { //res 即为原始返回的数据
                return {
                    "code": 200, //解析接口状态
                    "msg": res.message, //解析提示文本
                    "count": res.data.total, //解析数据长度
                    "data": res.data.list //解析数据列表
                };
            },
            method: 'post',
            contentType: 'application/json',
            even: false,
            headers: { 'token': layui.sessionData(setter.tableName).token },
            cols: [[
                { type: "checkbox" }
                , { field: 'TC_PROD_CODE', title: '产品类型编号', align: 'center', unresize: true }
                , { field: 'TC_PROD_NAME', title: '产品类型名称', align: 'center', unresize: true }
                , { field: 'TC_PROD_DSC', title: '产品类型描述', align: 'center', unresize: true }
            ]],
            page: true,
            limit: 5,
            layout: ['prev', 'page', 'next', 'skip'],
            text: {
                none: '暂无' //默认：无数据。注：该属性为 layui 2.2.5 开始新增
            },
            done: function (res, curr, count) {
                $('th').css({ 'background-color': '#CCDAE3', 'color': '#333333', 'font-size': '10px', 'font-weight': 'bold' });
                $('td').css({ 'font-size': '8px', 'color': '#666666' });
            }
        });


        // 查询
        $(".jiTaoButton").click(function () {
            var number = $("#Product_Number").val();
            var name = $("#Product_Name").val();
            var dsc = $("#Product_Dos").val();
            table.reload('ProdicobleType', {
                where: {
                    id: number,
                    name: name,
                    dsc: dsc
                },
                page: {
                    curr: 1
                }
            })
        })
    });
</script>